c
<template>
  <div class="roles">
    <!-- card -->

    <qf-card title="角色创建" url="/roles" btnTitle="返回">
      <!-- 内容 -->
      <qf-form
        width="80px"
        :formConfig="formConfig"
        :formBtns="formBtns"
        @submit="submitFn">
      </qf-form>
      <!-- 内容 end -->
    </qf-card>
    <!-- card end -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单配置
      formConfig: [
        {
          label: '角色名',
          field: 'role_name',
          type: 'text',
          rules: [
            { required: true, message: '请输入角色名名', trigger: 'blur' }
            // { min: 3, max: 5, message: '用户名3-5个字符', trigger: 'blur' }
          ]
        },
        {
          label: '角色描述',
          field: 'role_desc',
          type: 'text',
          rules: [
            { required: true, message: '请输入角色描述', trigger: 'blur' }
            // { min: 3, max: 5, message: '用户名3-5个字符', trigger: 'blur' }
          ]
        }
      ],
      formBtns: [
        {
          content: '更新',
          type: 'primary'
        },
        {
          content: '重置',
          type: ''
        }
      ]
    };
  },
  methods: {
    submitFn(formData) {
      console.log('更新数据处理', formData);
    }
  }
};
</script>

<style lang="scss" scoped>
// .users {
//   width: 100%;
//   height: 100%;

//   .el-card {
//     width: 96%;
//     margin: auto;
//   }
// }
</style>
